<template>
    <div>
        <section class="todoapp">
            <header class="header">
                <h1>todos</h1>
                <!-- 使用 v-model 绑定 newTodo, 监听 keyup 事件，同时使用修饰器， .enter, 按enter 键时事件才触发 -->
                <input class="new-todo" placeholder="接下来做什么？" v-model="newTodo" v-autofocus @keyup.enter="addTodo">
            </header>
            <section class="main" v-show="todos.length">
                <transition-group
                    name="staggered-fade"
                    tag="ul"
                    v-bind:css="false"
                    v-on:before-enter="beforeEnter"
                    v-on:enter="enter"
                    v-on:leave="leave"
                    class="todo-list">

                    <!-- 查看所有备忘 -->
                    <li v-for="todo in computedTodos" class="todo" :key="todo.id"
                        :class="{ completed: todo.completed }">
                        <!-- 使用 todo-item -->
                        <!-- 双向绑定备忘内容 title 和备忘已完成状态 completed -->
                        <!-- 监听 delete 事件 -->
                        <todo-item
                            v-bind:title.sync="todo.title"
                            v-bind:completed.sync="todo.completed"
                            @delete="removeTodo(todo)">
                        </todo-item>

                        <!-- 等价于
                        <todo-item
                        v-bind:title="todo.title"
                        v-on:update:title="todo.title = $event"></todo-item> -->
                    </li>
                </transition-group>
                <footer class="footer" v-show="todos.length">
                    <span class="todo-count">
                        <!-- remaining 计算剩余的未完成的数量，pluralize 用来过滤单位是否要负数 -->
                        <strong>{{ remaining }}</strong> {{ remaining | pluralize }} left
                    </span>
                    <button class="clear-completed" @click="removeCompleted" v-show="todos.length > remaining">
                        Clear completed
                    </button>
                </footer>
            </section>
        </section>
    </div>
</template>

<script>
import TodoItem from "./TodoItem";

let id = 1;
export default {
    components: {
        "todo-item": TodoItem
    },

    data() {
        return {
            // 所有备忘
            todos: [],
            newTodo: "",
        }
    },

    computed: {
        remaining() {
            // 过滤掉已完成的，获取数量
            return this.todos.filter(x => !x.completed).length
        },

        computedTodos() {
            return this.todos.filter((item) => {
                return item.title.toLowerCase().indexOf(this.newTodo.toLowerCase()) !== -1
            })
        },
    },
    filters: {
        pluralize(num) {
            // 是否加 s
            return num > 1 ? 'items' : 'item';
        }
    },

    methods: {
        // 新增备忘
        addTodo() {
            // 内容为空，不处理
            if (!this.newTodo) {
                return;
            }
            // 最后新增的备忘插在最前面，使用 unshift，不是 push
            this.todos.unshift({
                id: id++,
                title: this.newTodo,
                completed: false,
            });

            this.newTodo = "";
        },

        removeTodo(todo) {
            const index = this.todos.findIndex(x => x.id === todo.id);
            this.todos.splice(index, 1);
        },

        removeCompleted() {
            this.todos = this.todos.filter(x => !x.completed);
        },

        beforeEnter(el) {
            el.style.opacity = '0';
            el.style.height = '0';
        },

        // 与 CSS 结合时使用
        enter(el, done) {
            // 设置延时
            let delay = el.dataset.index * 150;
            setTimeout(function () {
                // 不加下面这行，编译会失败
                // eslint-disable-next-line
                Velocity(
                    el,
                    {opacity: 1, height: '60px'},
                    {complete: done}
                )
            }, delay);
        },

        leave(el, done) {
            let delay = el.dataset.index * 150;
            setTimeout(function () {
                // eslint-disable-next-line
                Velocity(
                    el,
                    {opacity: 0, height: 0},
                    {complete: done}
                )
            }, delay)
        },
    },
    directives: {
        autofocus: {
            inserted: function (el) {
                el.focus();
            }
        }
    }

}
</script>

<style>
@import "https://unpkg.com/todomvc-app-css@2.1.0/index.css";
</style>